<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" :checked="todoIsDone==todosLength && todosLength > 0 " v-on:change="hander"/>
    </label>
    <span> <span>已完成{{todoIsDone}}</span> / 全部{{todosLength}} </span>
    <button class="btn btn-danger" @click="handler1">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "",
  props:['todoIsDone','todosLength','updateTodoDone','removeDoneIsTrue'],
  methods: {
    //表单
    hander(event){
      //获取当前input勾选状态
      let done = event.target.checked;
     //最终需要调用父组件的方法，修改App组件的全部的数据
     this.updateTodoDone(done);
    },
    //按钮
    handler1(){
      //通知App删除数据
      this.removeDoneIsTrue();
    }
  }
};
</script>

<style scoped>
</style>
